<template>
  <div class="page forget-page">
    <div class="register-head-content">
      <div class="register-header">
        <img src="../../assets/img/register/logo.png" @click="toIndex" alt>
      </div>
    </div>
    <div class="register-content">
      <div class="forget-card">
        <div class="forget-title" @click="doClick">{{activeTitle}}</div>

        <el-steps :active="activeIndex">
          <el-step :class="activeIndex >= 2 ? 'send-step-line' : ''" title="验证"></el-step>
          <el-step :class="activeIndex >= 3 ? 'send-step-line' : ''" title="重置密码"></el-step>
        </el-steps>
        <div v-if="activeIndex == 1">
          <el-input class="theme-input" v-model="params.phone" placeholder="请输入注册使用的手机号">
            <img slot="prefix" src="../../assets/img/register/phone.png" height="34px">
          </el-input>

          <div class="identify">
            <el-col :span="13">
              <el-input class="theme-input input-img-canvas" v-model="imgCode"  placeholder="图形验证码">
                <img slot="prefix" src="../../assets/img/register/anquan.png" height="30px">
              </el-input>
            </el-col>
            <el-col :span="7">
              <s-identify :identifyCode="identifyCode"></s-identify>
            </el-col>
            <el-col :span="4">
              <el-button type="text" class="text-button" @click="refreshCode">
                看不清
                <br>换一张
              </el-button>
            </el-col>
          </div>

          <el-input placeholder="请输入短信验证码" class="theme-input" v-model="params.code">
            <img slot="prefix" src="../../assets/img/register/123.png" height="30px">
            <el-button
              slot="suffix"
              type="text"
              class="login-left-text-blue"
              @click="sendCode"
              :disabled="codeLeftTime!=60">
              发送验证码
              <span v-if="codeLeftTime!=60">({{codeLeftTime}})</span>
            </el-button>
          </el-input>
          <el-button @click="doNext">下一步</el-button>
        </div>
        <div v-else>
          <el-input class="theme-input" placeholder="请输入新密码" show-password v-model="params.password">
            <img slot="prefix" src="../../assets/img/register/lock.png"  height="29px">
          </el-input>
          <el-input class="theme-input" placeholder="请确认新密码" show-password v-model="params.submitPassword">
            <img slot="prefix" src="../../assets/img/register/lock1.png" height="29px">
          </el-input>
          <el-button @click="doSubmit">确定</el-button>
        </div>
      </div>
    </div>
    <div class="copyright-text"></div>
  </div>
</template>

<script>
import SIdentify from './picVerfication'
import validate from '@/assets/utils/validate.js'
export default {
  data() {
    return {
      activeTitle: '返回登录',
      activeIndex: 1,
      imgCode: '',
      identifyCode: '',
      identifyCodes: '1234567890',
      codeLeftTime: 60, //获取验证码间隔
      params: {
        phone: '',
        code: '',
        password: '',
        submitPassword: ''
      }
    }
  },
  methods: {
    toIndex() {
      window.location.href = 'http://www.gcs360.com'
    },
    init() {
      let left_time = localStorage.getItem(localSaved.forgetTime)
      if (left_time > 0 && left_time != 60) {
        this.codeLeftTime = left_time
        clearInterval(this.settime)
        this.setCodeTime()
      }
    },
    pwdcheck(){
      if (this.params.password == '') {
        _g.message('输入新密码不能为空', 'warning')
        return false
      }
      if (this.params.submitPassword == '') {
        _g.message('确认密码不能为空', 'warning')
        return false
      }
      if (this.params.password != this.params.submitPassword ) {
        _g.message('两次密码输入不一致', 'warning')
        return false
      }
      return  true;
    },
    check() {
      if (!validate.isPhone(this.params.phone)) {
        _g.message('请输入正确手机号', 'warning')
        return false
      }
      if (this.params.phone == '') {
        _g.message('手机号不能为空', 'warning')
        return false
      }
      if (this.identifyCode != this.imgCode) {
        _g.message('图片验证码不正确', 'warning')
        return false
      }
      return true
    },
    sendCode() {
      //点击发送验证码
      if(this.check()){
        _g.apiPost('/company/getSMS.do', { phone: this.params.phone }).then(res => {
          _g.toMessage({
            status: res.status,
            msg: res.status == 0 ? '已发送' : '发送失败'
          })
          if(res.status==0){
            this.setCodeTime()
          }
        })
      }
    },
    /**
     * @name 设置验证码延时
     */
    setCodeTime() {
      this.settime = setInterval(() => {
        this.codeLeftTime--
        localStorage.setItem(localSaved.forgetTime, this.codeLeftTime)
        if (this.codeLeftTime == 0) {
          clearInterval(this.settime)
          this.codeLeftTime = 60
          localStorage.setItem(localSaved.forgetTime, this.codeLeftTime)
        }
      }, 1000)
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
      // console.log(this.identifyCode)
    },
    doClick() {
      if (this.activeTitle == '返回登录') {
        this.$router.push({ path: '/login' })
      } else {
        this.activeIndex = 1
        this.activeTitle = '返回登录'
      }
    },
    doNext() {
      //点击下一步
      if(this.check()){
        if(this.params.code == ''){
          _g.message('短信验证码不能为空', 'warning')
        }else{
          this.activeIndex = 2
          this.activeTitle = '返回上一步'
        }
      }
    },
    doSubmit() {
      //点击确定按钮
      if(this.pwdcheck()){
        _g.apiPost('/company/forgetPassword.do', {
          phone: this.params.phone,
          password: this.params.password,
          yards:this.params.code
        }).then(res => {
          _g.toMessage(res)
          if(res.status==0){
            setTimeout(() => {
              this.$router.push({ path: '/login' }, 600)
            })
          }
        })
      }
    }
  },
  created() {
    this.makeCode()
    this.init()
  },
  mounted() {
    // 验证码初始化
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  components: {
    SIdentify
  }
}
</script>

<style lang="scss" scoped>
.input-img-canvas {
  width: 180px !important;
  height: 55px !important;
  input {
    width: 100%;
    height: 100%;
  }
}
.identify {
  margin: 0 0 16px 0;
  width: 360px;
  height: 55px;
  display: inline-block;
}
.login-left-text-blue {
  width: 100% !important;
  background: rgba($color: #fff, $alpha: 0) !important;
  text-shadow: none !important;
  border: none !important;
  color: #4ab0cf !important;
  font-size: 20px !important;
  line-height: 35px !important;
}
.text-button {
  width: 48px !important;
  font-size: 16px !important;
  color: #f09338 !important;
  background: #fff !important;
  text-shadow: none !important;
  text-align: left !important;
}
.forget-page {
  background: url('../../assets/img/register/forget-bg.png') no-repeat center;
}
</style>
